<template>
  <div id="bpp">
    <swiper :lunbotulist="lunbotulist"></swiper>
   
    <gird></gird>
  </div>
</template>

<script>
import gird from "../subcomponent/gird.vue";
import Swiper from "../subcomponent/Swiper"
export default {
  data: () => ({
    lunbotulist: []
  }),
  created() {
    this.getLunbotu();
  },
  components: {
    gird,
    Swiper 
  },
  methods: {
    getLunbotu() {
      this.$http.get("http://Localhost:5000/api/getlunbo").then(res => {
        const { status, message } = res.body;
        console.log(res);
        if (status === 0) {
          this.lunbotulist = message;
        } else {
          console.log("获取数据失败");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>

/* 九宫格 */

.demo-icon {
  font-size: 0;
}
.demo-icon .van-col {
  text-align: center;
  height: 100px;
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.demo-icon .van-icon {
  display: block;
  font-size: 32px;
  margin: 15px 0;
  color: rgba(69, 90, 100, 0.8);
}
.demo-icon span {
  font-size: 14px;
}
.van-col--8 {
  width: 33.33%;
}
#bpp {
  width: 100%;
}
</style>